<template>
  <div class="greetingTitle">
    <div class="title border-bottom">
      <router-link tag="i" to="/greeting" class="icon-xiangzuo" onclick=""></router-link>
      <router-link tag="span" to="/greeting"  class="title-return">我的贺卡</router-link>
      设置标题
      <span @touchend="edit">确定</span>
    </div>
    <div class="content">
      <label for="inputText" class="input-box">
        <input id="inputText" v-model="inputTitle" maxlength="10" type="text" placeholder="请输入或选中贺卡标题" @keyup="isEmpty"
               ref="input">
      </label>
      <div class="choosableTitle">
        可选标题
      </div>
      <ul>
        <li :class="{'active':active === 0}" @touchend="pitchOn(0,'端午安康')">端午安康</li>
        <li :class="{'active':active === 1}" @touchend="pitchOn(1,'阖家欢乐')">阖家欢乐</li>
        <li :class="{'active':active === 2}" @touchend="pitchOn(2,'女王节')">女王节</li>
        <li :class="{'active':active === 3}" @touchend="pitchOn(3,'元宵节快乐')">元宵节快乐</li>
        <li :class="{'active':active === 4}" @touchend="pitchOn(4,'爱在元宵')">爱在元宵</li>
        <li :class="{'active':active === 5}" @touchend="pitchOn(5,'新年快乐')">新年快乐</li>
        <li :class="{'active':active === 6}" @touchend="pitchOn(6,'狗年大吉')">狗年大吉</li>
        <li :class="{'active':active === 7}" @touchend="pitchOn(7,'事业步步高')">事业步步高</li>
        <li :class="{'active':active === 8}" @touchend="pitchOn(8,'恭贺新禧')">恭贺新禧</li>
        <li :class="{'active':active === 9}" @touchend="pitchOn(9,'贺新年')">贺新年</li>
        <li :class="{'active':active === 10}" @touchend="pitchOn(10,'财运多多')">财运多多</li>
        <li :class="{'active':active === 11}" @touchend="pitchOn(11,'团团圆圆过大年')">团团圆圆过大年</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {addCardTitle,CardTitle} from 'common/js/greeting'
  import {mapGetters,mapMutations} from 'vuex'
  import {computePV} from 'common/js/statistics'

  export default {
    data() {
      return {
        inputTitle: '',
        active: -1,
        name: '',
        title: ''
      }
    },
    beforeRouteLeave(to, from, next) {
      if (from.name !== 'greetingEdit') {
        this.setGreetingEditInit(true)
      }
      next()
    },
    mounted(){
      this.setInitEdit(true);
      computePV({
        page_type:8
      })
    },
    computed: {
      ...mapGetters([
        'initEdit',
        'greetingEditInit'
      ]),
    },
    methods: {
      //输入文字判断
      isEmpty() {
        if (this.inputTitle !== '') {
          this.active = -1;
          this.name = '';
        }
      },
      //选中标题
      pitchOn(id, item) {
        this.inputTitle = item;
        if (this.active !== id) {
          this.active = id;
        } else {
          this.active = -1;
        }
      },
      //提交
      edit() {
        if (this.inputTitle !== '') {
          //提交
          addCardTitle({
            "phpsid": localStorage.getItem('token'),//session_id
            "title": this.inputTitle,//贺卡标题
          }).then(res => {
            if (res.status === 1) {
              this.$dialog.toast({
                mes: '标题创建成功，请设置贺卡内容',
                timeout: 1000,
                icon: 'success',
                callback: () => {
                  this.$router.push('/greetingEdit/' + res.data);
                }
              });
            } else if (res.status === -1) {
              if (res.expand.type === 1) {
                this.$dialog.alert({
                  mes: res.expand.info, callback: () => {
                    this.$router.push('/login')
                  }
                });
              } else {
                this.$dialog.toast({mes: res.expand.info});
              }
            }
          })
        } else {
          this.$dialog.toast({
            mes: '请输入或选中其中一个标题！',
            timeout: 1000,
            callback: () => {
              this.$refs.input.focus();
            }
          });
        }
      },
      ...mapMutations({
        setInitEdit: 'INNIT_EDIT',
        setGreetingEditInit: 'GREETING_EDIT_INIT'
      })
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .greetingTitle
    width: 100%;
    overflow: hidden;

  .title
    position: relative;
    line-height: 1.5rem
    text-align: center;
    font-size: .55rem;
    color: $color-title;
    i
      position: absolute;
      top: 0;
      left: .5rem;
      line-height: 1.5rem;
      font-size: .6rem;
      color: $color-l-z;
    span
      position: absolute;
      top: 0;
      right: .5rem;
      line-height: 1.5rem;
      display: inline-block;
      font-size: .44rem;
    .title-return
      position :absolute;
      top:0;
      left: 1rem;
      width:2rem;
      line-height:1.5rem;

  .content
    .input-box
      display: block;
      line-height: 1.15rem;
      background: $background-input;
      margin: .5rem;
      padding: 0 .5rem;
      border-radius: .575rem;
    input
      width: 100%;
      line-height: .6rem;
    ul
      float: left;
      transform: translateX(.1rem);
      overflow: hidden;
      li
        border: $border-i;
        margin: .15rem;
        float: left;
        color: $color-b-title;
        padding: 0 .35rem;
        line-height: .76rem;
        border-radius: .76rem;
        font-size :.35rem;
      .active
        border: $border-i-a;
        background: -webkit-linear-gradient(-315deg, #f54cc5, #8755f0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
  .choosableTitle
    line-height:1rem;
    padding:0 .5rem;
    font-size :.35rem;
    color:$color-input-p;


</style>
